<template>
       <div class="ballBox" @mousedown="clickdown" @mousemove="clickmove" @mouseup="clickup" @movseleave="clickleave">
            
              <div class="ballBox_time">
                     <div>
                            11:38
                     </div>
                     <div>
                         <div>今天是2023年1月9日</div>
                         <div>Manday</div> 
                     </div> 
              </div>
              <div class="ballBox_weeks">
                     <div class="titles">
                              <div>待办</div>
                              <div></div>
                     </div>
                     <div class="lists">
                              
                     </div>
              </div> 
              <div class="ballBox_add">
                     添加
              </div> 
       </div>
</template> 
<script>
import { screen } from 'electron'
let win, winW, winH;

export default {
       name: 'toolbox',
       data() {
              return {
                     name: '工具s',
                     ox: 0,
                     oy: 0,
                     key: false,
                     sc: 0
              }
       },
       mounted() {
              win = this.$electron.remote.getCurrentWindow();
              console.log(win.getContentSize())
              winW = screen.getPrimaryDisplay().workAreaSize.width - win.getContentSize()[0];
              winH = screen.getPrimaryDisplay().workAreaSize.height - win.getContentSize()[1];
              
       },
       methods: {
              changestatus() {
                     this.name = 'asd'
              },
              //   鼠标按下
              clickdown(e) {
                     this.ox = e.pageX;
                     this.oy = e.pageY;
                     this.key = true; 
              },
              //   移动
              clickmove(e) {
                     if (this.key) { 
                            this.sc = `x:${e.screenX - this.ox}:y:${e.screenY - this.oy}:ws${winW}`;
                            let lx = e.screenX - this.ox;
                            let ly = e.screenY - this.oy;
                            if (10 > lx) {
                                   lx = 10
                            } else if (lx > winW - 20) {
                                   lx = winW - 10
                            }
                            if (10 > ly) {
                                   ly = 10
                            } else if (ly > winH - 20) {
                                   ly = winH - 10
                            } 
                            win.setPosition(lx, ly)

                     }
              },
              //   鼠标抬起
              clickup(e) {
                     this.key = false;
              },
              clickleave(e) {
                     this.key = false;
              }
       }
}
</script>
<style lang="less">
@colors:#404040;
@colors2:#64748B;
@sysfont:century gothic, texgyreadventor, stheiti, sans-serif;
.titles{
      color:@colors;
//       font-weight: bold;
      font-size: .8rem;
      position: relative;
      padding-left: 20px;
      color: @colors2;
      font-family:@sysfont;
      &::before{
          position: absolute;
          left: 2px;
          top: 3px;
          width: 10px;
          height: 10px;
          background-color: #ffadb2;
          content: '';
          border-radius: 50%;    
      }   
}
.ballBox {
       /* 如何让悬浮窗拥有点击相应 */
       -webkit-app-region: no-drag;
       width: 280px;
       height: 400px;
       border-radius: 5px;
       box-sizing: border-box; 
       background-size:4px 4px; 
       font-weight: bold; 
       font-weight: 100; 
       cursor: pointer;
       font-size: 14px;
       user-select: none;
       padding: 8px; 
       box-sizing: border-box; 
       overflow: hidden;
       position: relative;
       background:rgba(231, 231, 231, 0.89) ;
       display: flex;
       flex-direction: column;
    
       &>div{
              padding: 5px; 
              margin-bottom: 10px;
              &:nth-of-type(3){
                     margin-bottom: 0px; 
              }
       }
       &_time{
             width: 100%;
             background: #fff;
             border-radius: 5px;   
             display: flex;
             align-items: center;
             color: #64748B;
       //       font-weight: bold;
             font-family:@sysfont;
             &>div:nth-of-type(1){
                 font-size: 2rem;
                 margin-right: 1rem;
                 margin-left: 1rem;
             }
             &>div:nth-of-type(2){
                 font-size: .7rem;
                 padding-left: 1rem;
                 border-left: 1px solid #ccc; 
                 &>div:nth-of-type(2){
                     color: #94A3B8;
                 } 
             }
       }
       &_weeks{ 
             width: 100%;
             flex: 1;
             padding: 10px; 
             border-radius: 8px;
             background: linear-gradient(to top, #fdfbf4,#fcfdff);
             
       }
       &_add{
              padding: 20px; 
              text-align: center;   
              border-radius: 5px;
              background: linear-gradient(to top, #fdfbf4,#fcfdff);
              color: #94A3B8;
             font-weight: bold;
             font-size: .8rem;
       }
} 
 
</style>